{extend name="normal_base" /}
{block name="navigation"}{/block}
{block name="css"}
<style>
    .layui-form-item{
        margin: 2px;
    }

    .layui-input-where{
        width: 200px;
    }

    #add-customer{
        cursor:pointer;
        color: #FFB800;
    }
</style>
{/block}
{block name="body"}
<div class="x-body">

    <!--客户编号-->
    <div class="layui-input-inline">
        <input type="text" name="customer_number" id="customer_number"  placeholder="客户编号" value="" autocomplete="off" class="layui-input layui-input-where">
    </div>

    <div class="layui-input-inline">
        <input type="text" name="customer_name" id="customer_name"  placeholder="客户名称" value="" autocomplete="off" class="layui-input layui-input-where">
    </div>

    <button class="layui-btn layui-btn-sm"  lay-submit="" lay-filter="sreach" id="sreach-by-where">搜索</button>
    <button type="reset" class="layui-btn layui-btn-sm" id="reset-search">重置</button>

    <table id="search-customer-table" lay-filter="search-table" customer-id=""></table>

    <div class="layui-input-inline">
        <i class="fa fa-lightbulb-o fa-2x" style="color:#FFB800;" aria-hidden="true"></i><span style="color: #666666">若检索不到指定客户，需要先进行 <a id="add-customer">添加</a>！</span>
    </div>
</div>

{/block}

{block name="script"}

<script>
    layui.use(['table', 'form','layer'], function(){
        var laydate = layui.laydate;
        var table = layui.table;

        $ = layui.jquery;
        var form = layui.form
                ,layer = layui.layer;

        /*异步生成表格*/
        var customer_number = $('#customer_number').val();
        var customer_name = $('#customer_name').val();
        table.render({
            elem: '#search-customer-table'
            //,height: 500
            ,url: '{:url("admin/customer/search")}' //数据接口
            ,method: 'get'
            ,where:{customer_number:customer_number,customer_name:customer_name}//查询的where条件
            ,request:{pageName: 'page',limitName: 'limit'}//设置分页 和 limit 的参数名
            ,response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                ,statusCode: 0 //成功的状态码，默认：0
                ,msgName: 'msg' //状态信息的字段名称，默认：msg
                ,countName: 'count' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,page: true
            ,limit:20//每页显示的条数（默认：10）
            ,limits:[10,20,40,80,100]
            ,cols: [[ //表头
                {field: 'customer_number', title: '客户编号',sort: true, style:'cursor:pointer' ,event:'detail'}
                ,{field: 'company_name', title: '客户单位名称'}
                ,{title: '选择', align:'center', toolbar: '#search-list-tool-bar',unresize:true} //这里的toolbar值是模板元素的选择器
            ]]
        });

        /*按钮绑定刷新表格*/
        $('#sreach-by-where').bind('click', function () {
            var customer_number = $('#customer_number').val();
            var customer_name = $('#customer_name').val();
            table.reload('search-customer-table', {
                url: '{:url("admin/customer/search")}'
                ,where:{customer_number:customer_number,customer_name:customer_name}
                //,height: 300
            });
        });

        table.on('tool(search-table)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){
                //查看详情
                x_admin_show('详细信息','info/id/' + data.id);
            } else if(layEvent === 'choose'){
                //选择当前行
                window.console.log(data.id);
                $('#search-customer-table').attr('customer-id', data.id);
                if (navigator.cookieEnabled == false) {
                    layer.msg('请先开启浏览器的 cookie 功能！', {icon:5,time:3500});
                    return;
                }

                //为了和父页面方便的交互选择的客户新
                $.cookie('choose-search-cusotmer-info', data.id + '<==>'+ data.company_name, {path: '/' });
            }
        });


        /*点击添加按钮，打开添加客户的弹框*/
        $('#add-customer').bind('click', function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //parent.layer.close(index);
            parent.layer.open({
                title:'客户搜索',
                type: 2,
                maxmin: true,
                area: ['1000px', '600px'],    //宽和高
                //skin: 'layui-layer-molv',     //加上边框：layui-layer-rim；深蓝：layui-layer-lan；墨绿：layui-layer-molv
                //offset: ['60px', '240px'],  //屏幕坐标位置
                shadeClose: true, //点击遮罩关闭
                closeBtn: 1,     //0:不显示关闭按钮; 1:显示关闭按钮
                content: '{:url("admin/customer/add")}',
            });
        });

        /*重置按钮*/
        $('#reset-search').bind('click', function () {
            $('#customer_name').val('');
            $('#customer_number').val('');
        });
    });

    $('.customer-tr').dblclick(function () {
        x_admin_show('详细信息','info/id/' + $(this).attr('data-id'));
    });


</script>

<script type="text/html" id="search-list-tool-bar">
    <a lay-event="choose"><input type="radio" name="choose-customer-id"></a>
</script>
{/block}